<template>
	<div class="goods-detail" :class="[{ show: !loading }]">
		<van-skeleton
			avatar
			avatar-shape="square"
			:row-width="['50%', '30%', '90%', '86%', '100%', '100%', '60%', '90%', '100%']"
			:row="9"
			:loading="loading"
		>
			<!--轮播图-->
			<banner-swipe ref="bannerSwipe" :images="images"></banner-swipe>

			<!--商品信息-->
			<goods-info ref="goodsInfo" :goodsInfo="goodsInfo" :tkl="tkl"></goods-info>

			<!--店铺信息-->
			<shop-info ref="shopInfo" :goodsInfo="goodsInfo"></shop-info>

			<!--详细信息-->
			<simple-detail ref="simpleDetail" :goodsInfo="goodsInfo"></simple-detail>

			<!--底部工具栏-->
			<footer-bar ref="footerBar" :goodsInfo="goodsInfo" :tkl="tkl"></footer-bar>
		</van-skeleton>
	</div>
</template>

<script>
import store from 'store';
import { Skeleton } from 'vant';
import { BannerSwipe, GoodsInfo, ShopInfo, SimpleDetail, FooterBar } from './components/goodsDetail';
export default {
	name: 'goods-detail',
	components: {
		'banner-swipe': BannerSwipe,
		'goods-info': GoodsInfo,
		'shop-info': ShopInfo,
		'simple-detail': SimpleDetail,
		'footer-bar': FooterBar,
		'van-skeleton': Skeleton
	},
	data() {
		return {
			loading: false,
			goodsInfo: null,
			images: [],
			tkl: null
		};
	},
	created() {
		this.getGoodsDetail();

		// 淘宝授权状态反馈
		let authorize = this.$route.query.authorize;
		if (authorize === 'success') {
			window.addEventListener(
				'popstate',
				() => {
					this.$router.push('/index');
				},
				false
			);
		}

		document.getElementById('app').scrollTop = 0;

		// if (document.documentElement.scrollTop > 0) {
		// 	document.documentElement.scrollTop = 0;
		// }
		// if (document.body.scrollTop > 0) {
		// 	document.body.scrollTop = 0;
		// }
	},
	methods: {
		// 获取商品详情
		getGoodsDetail() {
			// 从缓存中读取商品信息
			if (Number(this.$route.query.superGoods) === 1) {
				this.goodsInfo = store.get('goodsInfo');
				// 加载轮播图
				if (this.goodsInfo.taobaoImage) {
					this.images = this.goodsInfo.taobaoImage.split(',');
				} else {
					this.images = [this.goodsInfo.pic];
				}
			} else {
				this.loading = true;
				let params = {
					gid: this.$route.query.gid
				};
				this.$service.shopping.goods.detail(params).then(res => {
					this.goodsInfo = res;

					// 加载轮播图
					if (this.goodsInfo.taobaoImage) {
						this.images = this.goodsInfo.taobaoImage.split(',');
					} else {
						this.images = [this.goodsInfo.pic];
					}

					this.loading = false;
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-detail {
	&.show {
		padding-bottom: 128px;
	}

	.van-skeleton {
		padding: 30px;
		background: $color-white;
		@include flexBox(null, null, column);
		.van-skeleton__avatar {
			width: 100% !important;
			padding-bottom: 100%;
			border-radius: 16px;
		}
		.van-skeleton__row {
			border-radius: 8px;
			&:nth-child(4) {
				height: 120px;
				margin: 20px auto 0;
			}
			&:nth-child(5) {
				height: 90px;
				margin: 20px auto 0;
			}
			&:nth-child(9) {
				height: 110px;
				margin: 20px auto 0;
			}
		}
	}
}
</style>
